<template>
  <div class="anime-loading">
    <div class="loading">
      <div class="el">L</div>
      <div class="el">o</div>
      <div class="el">a</div>
      <div class="el">d</div>
      <div class="el">i</div>
      <div class="el">n</div>
      <div class="el">g</div>
      <div class="el">.</div>
      <div class="el">.</div>
      <div class="el">.</div>
      <!-- <div class="progress"></div> -->
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import anime from "animejs/lib/anime.es.js";
export default {
  name: "AniLoading",
  data() {
    return {};
  },
  mounted() {
    anime({
      targets: ".loading .el",
      translateY: 5,
      delay: anime.stagger(100), // increase delay by 100ms for each elements.
      direction: "normal",
      loop: true
    });
    anime({
      targets: ".loading .progress",
      width: "178px", // -> from '28px' to '100%',
      duration: 2000
    });
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.anime-loading {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: white;
  .loading {
    position: relative;
    display: flex;
    width: auto;
    height: auto;
    padding-top: 10px;
    .el {
      margin-left: 10px;
      font-size: 20px;
    }
    .progress {
      position: absolute;
      width: 0px;
      height: 5px;
      top: 35px;
      left: 10px;
      background-color: black;
    }
  }
}
</style>